
import { useState } from 'react';
import { Box, Button, Text, Flex } from '@chakra-ui/react';

interface IProps {
    totalPages: number;
    onPageChange: (page: number) => void;
}

function Pagination({ totalPages, onPageChange }: IProps) {
    const [currentPage, setCurrentPage] = useState(1);

    const handlePageChange = (page: number) => {
        if (page >= 1 && page <= totalPages) {
            setCurrentPage(page);
            onPageChange(page);
        }
    };

    // Helper function to determine if we should show an ellipsis
    const shouldShowEllipsis = (start: number, end: number) => start - 1 > 1 || end + 1 < totalPages || currentPage===1 || currentPage===totalPages;


    // Helper function to render a page button
    const renderPageButton = (page: number, isActive: boolean) => (
        <Button
            key={page}
            variant={isActive ? 'solid' : 'outline'}
            colorScheme={isActive ? 'yellow' : 'gray'}
            onClick={() => handlePageChange(page)}
            size="sm"
            borderRadius="0"
            border="none"
            _hover={{ bg: 'yellow.400' }}
            mx={1}
        >
            {page}
        </Button>
    );

    // Calculate the pages to display
    const previousPage = currentPage - 1;
    const nextPage = currentPage + 1;

    return (
        <Box mt={4} textAlign="center">
            <Flex justifyContent="center" alignItems="center">
                {/* Previous button */}
                <Button
                    isDisabled={currentPage === 1}
                    onClick={() => handlePageChange(previousPage)}
                    variant="solid"
                    size="sm"
                    borderRadius="0"
                    border="none"
                    _hover={{ bg: 'gray.200' }}
                >
                    &lt;
                </Button>

                {/* First Page */}
                {currentPage !== 1 && renderPageButton(1, currentPage === 1)}

                {/* Ellipsis before current page if necessary */}
                {shouldShowEllipsis(2, previousPage) && currentPage > 3 && (
                    <Text mx={2} fontSize="sm" fontWeight="bold" px={2}>
                        ...
                    </Text>
                )}

                {/* Previous Page */}
                {previousPage > 1 && renderPageButton(previousPage, currentPage === previousPage)}

                {/* Current Page */}
                {renderPageButton(currentPage, true)}

                {/* Next Page */}
                {nextPage < totalPages && renderPageButton(nextPage, currentPage === nextPage)}

                {/* Ellipsis after current page if necessary */}
                {shouldShowEllipsis(nextPage, totalPages - 1) && currentPage < totalPages - 2 && (
                    <Text mx={2} fontSize="sm" fontWeight="bold" px={2}>
                        ...
                    </Text>
                )}

                {/* Last Page (only show if not on the last page) */}
                {currentPage !== totalPages && renderPageButton(totalPages, currentPage === totalPages)}

                {/* Next button */}
                <Button
                    isDisabled={currentPage === totalPages}
                    onClick={() => handlePageChange(nextPage)}
                    variant="solid"
                    size="sm"
                    borderRadius="0"
                    border="none"
                    _hover={{ bg: 'gray.200' }}
                >
                    &gt;
                </Button>
            </Flex>
        </Box>
    );
}

export default Pagination;